<style lang="less">
    .page_style {
        margin-top: 10px;
        text-align: right;
    }

    .item1 {
        height: 42px;
        line-height: 40px;
    }

    .code {
        width: 300px;
        margin-left: 10px;
    }

    .select {
        margin-right: 10px;
        width: 90px;
    }

    .name {
        margin-left: 20px;
    }

    .sousuo {
        margin-left: 10px;
    }

    .add {
        margin-left: 10px;
    }

    .page {
        margin-top: 10px;
    }

    .actionBtn {
        margin-left: 6px;
    }

    .input {
        width: 70%;
    }
    .text{
        text-align: right;
    }
    .table{
        margin-top: 20px;
    }
</style>
<template>
    <wl-content-top>

        <template slot="header">
            <Form>
                <FormItem :model="selectObj">
                    <FormItem>
                        <span class="name">项目名称：</span>
                        <Input v-model="selectObj.project_name" placeholder="请输入项目名称" class="code"/>
                        <Button type="primary" class="add" @click="modaladd" v-if="authButtonShow">
                            <Icon type="ios-add"/>
                            创建
                        </Button>
                        <Button type="success" v-model="selectObj.project_name" @click="selectBySelectObj"
                                class="sousuo">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                    </FormItem>
                </FormItem>
            </Form>
        </template>
        <template slot="body">
            <div>
                <Tabs @on-click="changeTab()" v-model="tab_index">
                    <TabPane v-for="(item,index) in filitionTabList" :key="index" :label="item.label"
                             :name="item.value">
                    </TabPane>
                </Tabs>
                <div class="table">
                    <Table border :columns="columns1" :data="datalist" :loading="loading">
                        <template slot-scope="{ row }" slot="action">
                            <Button type="primary" size="small" class="actionBtn" @click="edit(row)"
                                    v-if="row.state == '0'" v-show="tabShowArr !='all'">编辑
                            </Button>
                            <Button type="info" size="small" class="actionBtn" @click="show(row)">详情</Button>
                            <Button type="warning" size="small" class="actionBtn" @click="findCompany(row)"
                                    v-if=" row.state == '0' " v-show="tabShowArr =='1'">抽取咨询企业
                            </Button>
                            <Button type="warning" size="small" class="actionBtn" @click="findCompany(row)"
                                    v-if=" row.state == '5' " v-show="tabShowArr =='2'">抽取验收企业
                            </Button>
                            <Button type="warning" size="small" class="actionBtn" @click="findCompany(row)"
                                    v-if=" row.state == '10' " v-show="tabShowArr =='3'">抽取评估企业
                            </Button>
                            <Button type="warning" size="small" class="actionBtn" @click="Reason(row)"
                                    v-show="tabShowArr !='all'"
                                    v-if="row.state == '2' || row.state == '4' || row.state == '7'
                                    || row.state == '9' || row.state == '12' || row.state == '14'">驳回原因
                            </Button>
                            <Button type="error" size="small" class="actionBtn" @click="remove(row)"
                                    v-if="row.state == '0' " v-show="tabShowArr !='all'">删除
                            </Button>
                            <Button type="success" size="small" class="actionBtn" @click="look(row)"
                                    v-show="tabShowArr !='all'"
                                    v-if=" row.state != '0' && row.state != '1' && row.state != '6'
                                     && row.state != '11'">查看
                            </Button>
                        </template>
                    </Table>
                </div>
                <div class="page_style">
                    <Page show-total :current="currentPageNo" :page-size="currentPageSize"
                          :total="pageObj.totalRecord" @on-change="getPageNo"/>
                </div>
            </div>
            <Modal
                    v-model="modal1"
                    :title="title1"
                    class="modal"
                    @on-ok="saves('formItem')"
                    :loading="btnLoading"
                    @on-cancel="cancel('formItem')">
                <Form :label-width="130"  ref="formItem" :model="formItem" :rules="ruleValidate">
                    <FormItem label="项目名称：" prop="project_name">
                        <Input v-model="formItem.project_name" placeholder="请输入项目名称" class="input"></Input>
                    </FormItem>
                    <FormItem label="项目编号：" prop="project_code">
                        <Input v-model="formItem.project_code" placeholder="请输入项目编号" class="input"></Input>
                    </FormItem>
                    <FormItem label="所属机构：" prop="report_mechanism">
                        <Input v-model="formItem.report_mechanism" placeholder="请输入所属机构" class="input"></Input>
                    </FormItem>
                    <FormItem label="项目描述：" prop="data">
                        <Input v-model="formItem.data" placeholder="请输入项目描述" type="textarea" :autosize="{minRows: 2,maxRows: 5}"  class="input"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <Modal v-model="modal2" title="详情" width="700" cancel-text="关闭"
                   @on-cancel="modal = false" ok-text="确定" style="position:relative;">
                <Form ref="paramData" :model="paramData">
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="">项目名称:</Col>
                        <Col span="12" offset="1">{{paramData.project_name}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">项目编号:</Col>
                        <Col span="12" offset="1">{{paramData.project_code}}</Col>
                    </Row>
                    <Row class="item1" style="height:auto">
                        <Col span="6" style="text-align: right" class="">所属机构:</Col>
                        <Col span="12" offset="1">{{paramData.report_mechanism}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">项目状态:</Col>
                        <Col span="12" offset="1">{{descData[paramData.state]}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">项目描述:</Col>
                        <Col span="12" offset="1">{{paramData.data}}</Col>
                    </Row>
                </Form>
            </Modal>
            <Modal v-model="modal5" title="企业信息" width="700" cancel-text="关闭"
                   @on-cancel="modal = false" ok-text="确定" @on-ok="showlist" style="position:relative;">
                <Form ref="enterpriseCompanyInfo" :model="enterpriseCompanyInfo">
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="">企业名称:</Col>
                        <Col span="12" offset="1">{{enterpriseCompanyInfo.company_name}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">企业编号:</Col>
                        <Col span="12" offset="1">{{enterpriseCompanyInfo.company_code}}</Col>
                    </Row>
                    <Row class="item1" style="height:auto">
                        <Col span="6" style="text-align: right" class="">企业类型:</Col>
                        <Col span="12" offset="1">{{enterpriseCompanyInfo.company_type}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">组织机构代码证:</Col>
                        <Col span="12" offset="1">{{enterpriseCompanyInfo.organization_code}}</Col>
                    </Row>
                    <Row class="item1">
                        <Col span="6" style="text-align: right" class="red-name">企业描述:</Col>
                        <Col span="12" offset="1">{{enterpriseCompanyInfo.company_date}}</Col>
                    </Row>
                </Form>
            </Modal>
            <Modal v-model="modal3" title="查看企业上传资料" width="800">
                <Form ref="uploadingData">
                    <Row class="item1">
                        资料:
                    </Row>
                    <Row>
                        <embed width="100%" height="600" v-for="(item,index) in filesObj.pdfList" :key="index" :src="item"></embed>
                        <img :src="item" v-for="(item,index) in filesObj.imgList" :key="index" />
                    </Row>
                    <Row class="item1">
                        文本: {{uploadingData.data}}
                    </Row>
                </Form>
                <template slot="footer">
                    <Button type="info" @click="refuse" v-if="model3ButtonSHow">拒绝</Button>
                    <Button type="success" @click="okk(paramData)" v-if="model3ButtonSHow">通过</Button>
                </template>
            </Modal>

            <Modal v-model="modal4" title="驳回原因" width="700" cancel-text="取消" @on-ok="refuseAction"
                   @on-cancel="modal = false" ok-text="确定" style="position:relative;">
                <Form ref="paramData" v-model="data">
                    <FormItem>
                        <Input v-model="refuseInput" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入驳回原因..."></Input>
                    </FormItem>
                </Form>
            </Modal>

        </template>
    </wl-content-top>
</template>

<script>
import {
  findProjectInfoList, deleteProject, insertProject, updateStateById, lookUploadingInfo,
  updataAdoptState, updataRefuseState } from '@/api/user'
import { getCompany } from '@/api/demo'

export default {
  data () {
    return {
      ruleValidate: {
        project_name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        project_code: [
          { required: true, message: '项目名编号不能为空', trigger: 'blur' }
        ],
        report_mechanism: [
          { required: true, message: '所属机构不能为空', trigger: 'blur' }
        ],
        data: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ]
      },
      enterpriseCompanyInfo: {},
      enterpriseProjectInfo: {},
      upParamData: {},
      id: '',
      tabShowArr: 'all',
      authButtonShow: true,
      model3ButtonSHow: true,
      formItem: {
        projectName: '',
        projectCode: '',
        reportMechanism: '',
        data: ''
      },
      pdfData: '[]',
      refuseInput: '',
      loading: false,
      btnLoading: true,
      currentPageNo: 1,
      currentPageSize: 10,
      tab_index: '',
      tabDataList: [
        { label: '全部', value: '' },
        { label: '待咨询', value: '0' },
        { label: '待企业咨询', value: '1' },
        { label: '企业咨询驳回', value: '2' },
        { label: '企业咨询通过', value: '3' },
        { label: '咨询驳回', value: '4' },
        { label: '咨询通过(待验收)', value: '5' },
        { label: '待企业验收', value: '6' },
        { label: '企业验收驳回', value: '7' },
        { label: '企业验收通过', value: '8' },
        { label: '验收驳回', value: '9' },
        { label: '验收通过(待评估)', value: '10' },
        { label: '待企业评估', value: '11' },
        { label: '企业评估驳回', value: '12' },
        { label: '企业评估通过', value: '13' },
        { label: '评估驳回', value: '14' },
        { label: '评估通过', value: '15' }
      ],
      descData: ['待咨询', '待企业咨询', '企业咨询驳回', '企业咨询通过', '咨询驳回', '咨询通过(待验收)', '待企业验收', '企业验收驳回', '企业验收驳通过', '验收驳回', '验收通过(待评估)', '待企业评估', '企业评估驳回', '企业评估通过', '评估驳回', '评估通过'],
      modal2: false,
      modal1: false,
      modal3: false,
      modal4: false,
      modal5: false,
      pdfModel: false,
      title1: '',
      paramData: {},
      paramDataList: {},
      CompanyList: [],
      uploadingData: {},
      data: {},
      typelist: [],
      company_type: '',
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        state: ''
      },
      selectObj: {
        pageNo: 1,
        pageSize: 10,
        project_name: ''
      },
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 160,
          align: 'center'

        },
        {
          title: '项目名称',
          key: 'project_name',
          align: 'center',
          width: 160

        },
        {
          title: '项目编号',
          key: 'project_code',
          align: 'center',
          width: 170
        },
        {
          title: '所属机构',
          key: 'report_mechanism',
          align: 'center',
          width: 170
        },
        {
          title: '状态',
          key: 'state',
          align: 'center',
          width: 170,
          render: (h, params) => {
            let state = params.row.state
            return h('span', this.descData[state])
          }
        },
        {
          title: '操作',
          slot: 'action',
          width: 350,
          align: 'center'
        }
      ],
      datalist: [],
      filesObj: {
        pdfList: [],
        imgList: []
      }
    }
  },
  computed: {
    filitionTabList () {
      let data = this.tabShowArr
      if (data === 'all') {
        return this.tabDataList
      } else if (data === '1') {
        return [this.tabDataList[1], this.tabDataList[2], this.tabDataList[3], this.tabDataList[4], this.tabDataList[5], this.tabDataList[6]]
      } else if (data === '2') {
        return [this.tabDataList[6], this.tabDataList[7], this.tabDataList[8], this.tabDataList[9], this.tabDataList[10], this.tabDataList[11]]
      } else if (data === '3') {
        return [this.tabDataList[11], this.tabDataList[12], this.tabDataList[13], this.tabDataList[14], this.tabDataList[15], this.tabDataList[16]]
      } else {
        return []
      }
    },
    pdfList () {
      return JSON.parse(this.pdfData)
    }
  },
  methods: {
    getlist (state) {
      this.loading = true
      console.log('~~~~')
      console.log(this.tab_index)
      let data = { state: state, pageNo: this.pageObj.pageNo, pageSize: this.pageObj.pageSize }
      findProjectInfoList(data).then(ret => {
        console.log(data, 'qq')
        this.loading = false
        if (ret.data.errcode === 0) {
          this.datalist = ret.data.data.results
          console.log(ret)
          this.pageObj.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    okk () {
      console.log(this.data, 'iiiiiii')
      var param = {
        'id': this.data.id,
        'state': this.data.state
      }
      console.log(param, 'iiiiiii22')
      if (confirm('确定通过吗？')) {
        updataAdoptState(param).then(ret => {
          if (ret.data.errcode === 0) {
            this.getlist(this.tab_index)
            this.modal3 = false
            console.log(ret)
          } else {
            this.$Message.error({
              content: '操作失败,\n' + ret.data.errmsg
            })
          }
        })
      }
    },
    refuse () {
      this.modal4 = true
    },
    refuseAction () {
      console.log(this.data, 'iiiiiiioooooo')
      var param = {
        id: this.data.id,
        state: this.data.state,
        remark: this.refuseInput
      }
      console.log(param, 'iiiiiii22')
      if (confirm('确定拒绝吗？')) {
        updataRefuseState(param).then(ret => {
          if (ret.data.errcode === 0) {
            this.getlist(this.tab_index)
            this.modal3 = false
            console.log(ret)
          } else {
            this.$Message.error({
              content: '操作失败,\n' + ret.data.errmsg
            })
          }
        })
      }
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.getlist(this.tab_index)
    },
    look (row) {
      this.data = row
      let data = { project_id: row.id, state: row.state, project_state: parseInt(this.tabShowArr) - 1 }
      lookUploadingInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal3 = true
          this.uploadingData = ret.data.data
          this.filesFiltration(this.uploadingData.upload_file)
          console.log(ret)
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
      if (this.$common.xeUtils.includes(['2', '3', '7', '8', '12', '13'], row.state)) {
        this.model3ButtonSHow = true
      } else {
        this.model3ButtonSHow = false
      }
    },
    modaladd () {
      this.formItem = {}
      this.modal1 = true
      this.title1 = '添加项目'
      this.btnLoading = true
    },
    Reason (row) {
      let text = ''
      console.log(row, 'pppp')
      switch (row.state) {
        case '2':
          text = row.enterprise_consulting_back_resaon
          break
        case '4':
          text = row.consulting_back_resaon
          break
        case '7':
          text = row.enterprise_acceptance_back_resaon
          break
        case '9':
          text = row.acceptance_back_resaon
          break
        case '12':
          text = row.enterprise_assessment_back_resaon
          break
        case '14':
          text = row.assessment_back_resaon
          break
      }
      this.$Modal.warning({
        title: '驳回原因：',
        content: text
      })
    },
    remove (row) {
      let text = '确认删除吗？'
      this.$Modal.confirm({
        title: '提示：',
        content: text,
        loading: true,
        onOk: () => {
          let data2 = { 'id': row.id }
          deleteProject(data2).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Modal.remove()
              this.getlist(this.tab_index)
              this.success()
            } else {
              this.$Modal.remove()
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
        }
      })
    },
    edit (e) {
      this.id = e.id
      this.title1 = '编辑项目'
      this.formItem = e
      this.modal1 = true
      this.btnLoading = true
    },
    changeTab () {
      this.currentPageNo = 1
      this.currentPageSize = 10
      console.log(this.tab_index, 'tab页')
      if (this.tab_index === 0) {
        this.tab_index = ''
        this.getlist('')
      } else {
        this.getlist(this.tab_index)
      }
    },
    cancel (name) {
      this.$refs[name].resetFields()
      this.getlist(this.tab_index)
    },
    saves (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const data1 = {
            'id': this.id,
            'projectName': this.formItem.project_name,
            'projectCode': this.formItem.project_code,
            'reportMechanism': this.formItem.report_mechanism,
            'data': this.formItem.data
          }
          insertProject(data1).then(ret => {
            if (ret.data.errcode === 0) {
              this.modal1 = false
              this.getlist(this.tab_index)
              this.success()
            } else {
              this.btnLoading = false
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
          this.btnLoading = false
        }
      })
    },
    findCompany (row) {
      console.log(row, '666666')
      if (row.state === '0') {
        this.company_type = '0'
      } else if (row.state === '5') {
        this.company_type = '1'
      } else if (row.state === '10') {
        this.company_type = '2'
      }
      let data = {
        company_type: this.company_type,
        id: row.id,
        state: row.state
      }
      getCompany(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.paramDataList = row
          this.modal5 = true
          console.log(ret.data.data)
          this.enterpriseCompanyInfo = ret.data.data[0]
          this.enterpriseProjectInfo = ret.data.data[1]
        } else if (ret.data.errcode) {
          alert(ret.data.errmsg)
        }
      })
    },
    // 详情
    show (row) {
      this.modal2 = true
      this.paramData = row
    },
    showlist () {
      const data4 = {
        state: this.enterpriseProjectInfo.state,
        project_name: this.enterpriseProjectInfo.project_name,
        company_id: this.enterpriseCompanyInfo.company_id,
        company_name: this.enterpriseCompanyInfo.company_name,
        company_type: this.enterpriseCompanyInfo.company_type,
        project_code: this.enterpriseProjectInfo.project_code,
        report_mechanism: this.enterpriseProjectInfo.report_mechanism,
        project_id: this.enterpriseProjectInfo.id,
        project_data: this.enterpriseProjectInfo.data,
        id: this.enterpriseProjectInfo.id,
        project_state: parseInt(this.tabShowArr) - 1
      }
      updateStateById(data4).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal5 = false
          this.getlist(this.tab_index)
          this.success()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
        console.log(ret, '66666ddd')
      })
    },
    selectBySelectObj () {
      findProjectInfoList(this.selectObj).then(ret => {
        this.datalist = ret.data.data.results
        console.log(this.selectObj.project_name, 'ddd')
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    filesFiltration (jsonData) {
      this.filesObj = {
        imgList: [],
        pdfList: []
      }
      let jsonObj = jsonData.split(',')
      jsonObj.forEach(item => {
        let search = '.'
        let start = item.lastIndexOf(search)// 获得字符串的开始位置
        let result = item.substring(start + 1)// 截取字符串
        if (this.$common.xeUtils.includes(['png', 'jpg', 'jpeg'], result)) {
          this.filesObj.imgList.push(item)
        } else if (result === 'pdf') {
          this.filesObj.pdfList.push(item)
        }
      })
    }
  },
  mounted () {
    this.url = `https://jysh.oss-cn-qingdao.aliyuncs.com/community/2-%E5%8A%9E%E7%90%86%E5%9F%8E%E9%95%87%E5%B1%85%E6%B0%91%E6%9C%80%E4%BD%8E%E7%94%9F%E6%B4%BB%E4%BF%9D%E9%9A%9C%E9%87%91%E9%A2%9D%E8%B0%83%E6%95%B4.pdf`
    this.tabShowArr = this.$route.params.menu_id
    console.log(this.tabShowArr, 'wwwwww')
    if (this.tabShowArr === '1') {
      this.tab_index = '0'
    }
    this.getlist(this.tab_index)
  },
  watch: {
    $route (to) {
      this.authButtonShow = true
      this.tabShowArr = to.params.menu_id
      if (this.tabShowArr !== '1') {
        this.authButtonShow = false
      }
      let state = this.filitionTabList
      console.log(state, '22222')
      this.tab_index = state[0].value === '' ? 0 : state[0].value
      this.getlist(state[0].value)
    }
  }
}
</script>

<style scoped>

</style>
